<template>
  <div class="hotel" ref="homePage">
    <v-search></v-search>

    <van-dropdown-menu active-color="#46d0ca" style="background: #f6f6f6;">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <div class="hotel-item" @click="Jumpmenp()">
      <img style="width: 8.75rem;border-radius:0.3125rem;margin-right: 0.625rem;flex-shrink:0;" src="@/assets/400.jpg" />
      <div class="hotel-item-right">
        <p class="hotel-title">苏州隐居酒店苏州拙政园店</p>
        <p class="hotel-intro">隐居酒店苏州拙政园酒店选取了有温度感的老材料,进行了全新的组合,在古老的苏州城与现代舒适的生活体验之间建立关联,打造了一个重逢之境。来到这里,你可以遇见知己,也能遇见最真实的自己。平江路是最具江南特色的水弄堂,水陆并行、河街相邻,住在漫心苏州隐居酒店苏州拙政园店,推开窗即可感受到曲水人家的扫洒忙碌,可以听到地道的吴侬软语,还可以在“桃花源记”品尝苏式小食。</p>
        <p class="hotel-loaction">
          <van-icon size="15px" color="#46d0ca" name="location-o" />
          <span>江苏省苏州市姑苏区观前街道敬文里29号</span>
        </p>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 0.3125rem;">
          <van-tag style="display: table;" round plain type="success" color="#46d0ca">品牌酒店</van-tag>
          <van-button style="color: white;min-width: 5rem;" color="#46d0ca" size="small" round type="info">￥<span style="font-size: 1rem;">111</span>起</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import search from '../search.vue'
  export default {
    components: {
      "v-search": search,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度
        value1: 0,
        value2: 'a',
        value3: 'a',
        option1: [{
            text: '推荐排序',
            value: 0
          },
          {
            text: '低价排序',
            value: 1
          },
          {
            text: '高价排序',
            value: 2
          }
        ],
        option2: [{
            text: '默认排序',
            value: 'a'
          },
          {
            text: '好评排序',
            value: 'b'
          },
          {
            text: '销量排序',
            value: 'c'
          },
        ],
        option3: [{
            text: '默认排序',
            value: 'a'
          },
          {
            text: '好评排序',
            value: 'b'
          },
          {
            text: '销量排序',
            value: 'c'
          },
        ]
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods:{
      Jumpmenp() {
        this.$router.push({
          path: "/Home/signDetail",

        })
      },
    }
  }
</script>

<style lang="scss">
  .hotel {
    .hotel-item {
      margin: 0.625rem;
      display: flex;
      height: 7.5rem;
      justify-content: space-between;
      border: 0.0625rem solid #dedede;
      border-radius: 0.3125rem;
      background: #fff;
      padding-right:0.625rem;
      position: relative;
      .hotel-item-right{
        width: 100%;
        overflow: hidden;
        .hotel-title{
          font-size: 1rem;
          margin-top: 0.625rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .hotel-intro{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.8125rem;
          color: #666;
          margin-top: 0.125rem;
        }
        .hotel-loaction{
          color: #999;
          margin-top: 0.375rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.8125rem;
        }
      }
    }
  }
</style>
